<template>
    <el-container>
      <el-header>
        {{userName}}<br/>
        <el-button @click="logOut" type="danger" >退出</el-button>
      </el-header>

      <el-container>
        <el-aside width="300px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu  class="el-menu-vertical-demo" >
                <el-menu-item index="4">
                  <el-icon><document /></el-icon>
                  <el-link href="" :underline="false" @click="openMenu('articleList')">文章管理</el-link>
                </el-menu-item>

                <el-menu-item index="4">
                  <el-icon><help-filled /></el-icon>
                  <el-link href="" :underline="false" @click="openMenu('menuList')">菜单管理</el-link>
                </el-menu-item>

                <el-menu-item index="4">
                  <el-icon><location /></el-icon>
                  <el-link href="" :underline="false" @click="openMenu('addressList')">地区管理</el-link>
                </el-menu-item>

                <el-menu-item index="4">
                  <el-icon><setting /></el-icon>
                  <el-link href="" :underline="false" @click="openMenu('systemList')">系统管理</el-link>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <component :is="rightMain" ></component>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>

import systemList from "@/components/system/list";
import articleList from "@/components/article/list";
import articleAdd from "@/components/article/add";
import menuList from "@/components/menu/list";
import addressList from "@/components/address/list";

export default {
  name: "index",
  data(){
    return{
      rightMain:'articleList',
      userName:localStorage.getItem('userName')?localStorage.getItem('userName'):sessionStorage.getItem('userName')
    }
  },
  components:{
    systemList,
    articleList,
    articleAdd,
    menuList,
    addressList
  },
  methods:{
    openMenu(m){
      this.rightMain = m
    },
    logOut(){
      localStorage.removeItem('token')
      sessionStorage.removeItem('token')

      localStorage.removeItem('userName')
      sessionStorage.removeItem('userName')

      this.$router.push('/login')

    }
  }
}
</script>

<style scoped>
@import "../assets/index.css";
.el-header{
  background-color: #1890ff;
  height: 80px;
}
</style>
